<template>
    <div>
        <el-card class="!border-none mb-4" shadow="never">
            <span style="color:red;font-size:18px;font-weight:900;">
                温馨提示：更新后需要按Ctrl+F5强制刷新页面后再使用
            </span>
        </el-card>
        <el-card class="!border-none mb-4" shadow="never">
            <el-form class="mb-[-16px]" :model="queryParams" inline>
                <el-form-item label="应用名称" prop="name">
                    <el-input class="w-[280px]" v-model="queryParams.name" clearable placeholder="请输入应用名称" />
                </el-form-item>
                <el-form-item label="安装时间" prop="create_time">
                    <el-input class="w-[280px]" v-model="queryParams.create_time" clearable
                        placeholder="请输入安装时间" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getPlugins">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <div class="mt-4">
            <el-table :data="appListThird">
                <el-table-column label="图标" min-width="100">
                    <template #default="{ row }">
                        <img :src="row.app_icon" alt="" style="width:40px;height:40px;border-radius: 8px;">
                    </template>
                </el-table-column>
                <el-table-column label="应用名称" prop="name" show-overflow-tooltip />
                <el-table-column label="版本号" prop="version_no" show-overflow-tooltip>
                    <template #default="{ row }">
                        <div style="display:flex;">
                            <div v-if="row.is_install != 0">
                                {{ row.pre_version_no }}
                            </div>
                            <div v-if="row.is_install == 0">
                                {{ row.version_no }}
                            </div>
                            <div v-if="(row.pre_version_no != row.version_no) && row.is_install != 0" style="margin-left: 10px;">
                                <router-link :to="{
                                    path: getRoutePath(
                                        'application/appDetail'
                                    ),
                                    query: {
                                        app: row.app,
                                        title: 1,
                                        yy: 1
                                    },
                                }">
                                    <el-button type="success" size="small">发现新版本</el-button>
                                </router-link>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="240" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="installPlugin(row.app)" v-if="row.is_install == 0"> 
                            安装
                        </el-button>
                        <el-button type="primary" link v-if="row.is_install == 1">
                            <router-link :to="{
                                path: getRoutePath(
                                    'application/appDetail'
                                ),
                                query: {
                                    app: row.app,
                                    yy: 1
                                },
                            }">
                                查看详情
                            </router-link>
                        </el-button>
                        <el-button type="primary" link v-if="row.is_install == 1">
                            <router-link :to="{
                                path: getRoutePath(
                                    'application/appDetail'
                                ),
                                query: {
                                    app: row.app,
                                    title: 1,
                                    yy: 1
                                },
                            }">
                                检查更新
                            </router-link>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { usePaging } from "@/hooks/usePaging";
import { useDictData } from "@/hooks/useDictOptions";
import {
    apiInstallappLists,
    apiInstallappDelete,
    getAppPlugsList,
    installAppPlugs,
    installLocationApp
} from "@/api/installapp";
import { getToken } from "@/utils/auth";
import type { UploadProps } from "element-plus";
import { getAppList, installApp, unloadappDelete, unloadappLists, unloadappRestore, unloadappTrueDelete, newInstallapp } from "@/api/cloudupdate";
import { timeFormat } from "@/utils/util";
import feedback from "@/utils/feedback";
import cache from "@/utils/cache";
import { getRoutePath } from "@/router";

import { ElLoading, ElMessageBox } from "element-plus";
const appListThird = ref<any[]>([]);
// 查询条件
const queryParams = reactive({
    name: "",
    create_time: "",
    uninstall_time: "",
    pid:1
});
const getPlugins = async () => {
    console.log(queryParams)
    await getAppPlugsList(queryParams).then((res) => {
        console.log(res)
        appListThird.value = res
    });
};
const resetParams = () => {
    queryParams.name = ""
    queryParams.create_time = ""
    queryParams.uninstall_time = ""
};
const installPlugin = (app: string) => {
    ElMessageBox.confirm("确认安装应用？", "安装应用提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        // if you want to disable its autofocus
        // autofocus: false,
    })
        .then(() => {
            const loading = ElLoading.service({
                lock: true,
                text: "安装中...",
                background: "rgba(0, 0, 0, 0.7)",
            });
            newInstallapp({ app: app, currstep: 0 })
                .then((res) => {
                    newInstallapp({ app: app, currstep: 1 })
                        .then((res) => {
                            loading.close();
                            const loadings = ElLoading.service({
                                lock: true,
                                text: "更新到最新版中...",
                                background: "rgba(0, 0, 0, 0.7)",
                            });
                            newInstallapp({ app: app, currstep: 2 })
                                .then((res) => {
                                    loadings.close();
                                    getPlugins();
                                })
                                .catch((ret) => {
                                    loadings.close();
                                    getPlugins();
                                });
                        })
                        .catch((ret) => {
                            loading.close();
                            getPlugins();
                        });
                        getPlugins();
                })
                .catch((ret) => {
                    getPlugins();
                    loading.close();
                });
        })
        .catch(() => { });
        getPlugins()
};
getPlugins()
</script>